<template>
  <div class="home-search-box">
    <!-- 位置信息 -->
    <div class="location bottom-gray-line">
      <div class="city" @click="cityClick">广州</div>
      <div class="position" @click="positionClick">
        <span class="text">我的位置</span>
        <img src="@/assets/img/home/icon_location.png" alt="" />
      </div>
    </div>
    <!-- 日期范围 -->
    <div class="data-range bottom-gray-line" @click="showCalendar = true">
      <div class="date">
        <div class="tip">入住</div>
        <div class="time">{{ starDateStr }}</div>
      </div>
      <div class="stay">共{{ stayCount }}晚</div>
      <div class="date">
        <div class="tip">离店</div>
        <div class="time">{{ endDateStr }}</div>
      </div>
    </div>
    <!-- 日历 -->
    <van-calendar
      :round="false"
      v-model:show="showCalendar"
      type="range"
      @confirm="onConfirm"
      color="#ff9645"
    />
    <!-- 价格/人数 -->
    <div class="data-range bottom-gray-line">
      <div class="date textColor" @click="priceClick" :class="ShowColor">
        <span class="newPriceColor">
          <span v-if="showPrice" class="textColor">价格不限</span>
          <span class="rmb" v-if="rmbLine">￥</span>
          {{ newPrice0 }}
          <span class="Line" v-if="rmbLine">-</span>
          {{ newPrice1 }}</span
        >
      </div>
      <span v-if="close" class="newPriceColorIcon" @click="iconClick"
        ><van-icon color="#999" name="close"
      /></span>

      <div class="date textColor" @click="peopleClick">人数不限</div>

      <!--Popup  价格不限弹出窗口 -->
      <van-popup
        v-model:show="priceShow"
        round
        closeable
        position="bottom"
        :style="{ height: '40%' }"
      >
        <PricePeople
          title="价格"
          :show="show"
          size="18px"
          color="#333"
          weight="700"
          bgc="#fff"
          bgc1="#f1f3f5"
          :ref="priceRef"
        ></PricePeople>
      </van-popup>

      <!-- 人数不限弹出窗口 -->
      <van-popup
        v-model:show="peopleShow"
        closeable
        close-icon-position="top-left"
        position="bottom"
        :style="{ height: '100%' }"
      >
        <VanPopupList @click="VanPopupListClick"></VanPopupList>
      </van-popup>
    </div>
    <!-- 关键字 -->
    <div class="date textColor bottom-gray-line">关键词/位置/民宿名</div>
    <!-- 热门建议 -->
    <div class="hot-suggest" @click="hotSuggestClick">
      <template v-for="(item, index) in hotSuggests" :key="index">
        <div
          class="item"
          :style="{
            color: item.tagText.color,
            background: item.tagText.background.color
          }"
        >
          {{ item.tagText.text }}
        </div>
      </template>
    </div>
    <!-- 搜索按钮 -->
    <div class="date">
      <van-button class="vanbtn" type="primary" block round @click="searchBtnClick">
        开始搜索
      </van-button>
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import { ref, computed } from 'vue'
  import { fromatMonthDay, getDiffDays } from '@/utils/format_date'
  import { storeToRefs } from 'pinia'
  import useHomeStore from '@/stores/modules/home'
  import useCityStore from '@/stores/modules/city'
  import useMainStore from '@/stores/modules/main'
  import PricePeople from '@/components/PricePeople/PricePeople.vue'
  import VanPopupList from '@/components/van-popup-list/van-popup-list.vue'

  const router = useRouter()
  const cityClick = () => {
    router.push('/city')
  }

  const show = ref(false)

  const priceShow = ref(false)

  const priceClick = () => {
    priceShow.value = true
  }
  const peopleShow = ref(false)
  const peopleClick = () => {
    peopleShow.value = true
  }
  const VanPopupListClick = () => {
    peopleShow.value = false
  }

  const viewHouseBtnsClick = () => {
    priceShow.value = false
  }
  const ShowColor = ref()

  const rmbLine = ref(false)
  const newPrice0 = ref()
  const newPrice1 = ref()
  const close = ref(false)
  const showPrice = ref(true)
  const icon = ref(false)

  const priceRef = (value) => {
    if (priceShow.value === false) {
      newPrice0.value = value?.priceRange[0]
      newPrice1.value = value?.priceRange[1]
      ShowColor.value = 'showColor'
      rmbLine.value = true
      close.value = true
      showPrice.value = false
      //   if (icon.value === true) {
      // 	value?.changePriceRange()

      //   }
      if (value?.priceRange[1] === 0) {
        close.value = false
        rmbLine.value = false
        newPrice0.value = ''
        newPrice1.value = ''
        showPrice.value = true
      }
    }
  }

  const iconClick = () => {
    close.value = false
    rmbLine.value = false
    newPrice0.value = ''
    newPrice1.value = ''
    showPrice.value = true
    icon.value = true
  }

  // 格式化时间
  const mainStore = useMainStore()
  const { startDate, endDate } = storeToRefs(mainStore)
  const starDateStr = computed(() => fromatMonthDay(startDate.value))
  const endDateStr = computed(() => fromatMonthDay(endDate.value))
  const stayCount = ref(getDiffDays(startDate.value, endDate.value))
  const showCalendar = ref(false)
  const onConfirm = (value) => {
    const selectStarDate = value[0]
    const selectEndDate = value[1]
    mainStore.startDate = selectStarDate
    mainStore.endDate = selectEndDate
    stayCount.value = getDiffDays(selectStarDate, selectEndDate)
    showCalendar.value = false
  }
  // 热门建议1
  const homeStore = useHomeStore()
  const { hotSuggests } = storeToRefs(homeStore)

  // 城市点击
  const positionClick = () => {
    navigator.geolocation.getCurrentPosition(
      (res) => {
        console.log('获取位置成功', res)
      },
      (err) => {
        console.log('获取位置失败', err)
      },
      {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      }
    )
  }

  //发起请求
  const cityStore = useCityStore()
  const { currentCity } = storeToRefs(cityStore)
  const searchBtnClick = () => {
    router.push({
      path: '/search',
      query: {
        startDate: startDate.value,
        endDate: endDate.value,
        currentCity: currentCity.value
      }
    })
  }

  const hotSuggestClick = () => {
    router.push('/search  ')
  }
</script>

<style scoped>
  :global(.home-search-box .van-popup) {
    background-color: #f1f3f5 !important;
  }

  .home-search-box {
    --van-calendar-popup-height: 100%;
  }
  .location {
    display: flex;
    justify-content: center;
    margin: 10px 10px;
    align-items: center;
  }
  .city {
    flex: 1;
    padding-left: 10px;
    font-weight: 500;
    font-size: 15px;
    color: #333;
  }
  .text {
    font-weight: 300;
    font-size: 12px;
    color: #666;
    margin-right: 5px;
  }
  .position img {
    width: 17px;
  }
  .data-range {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tip {
    color: #666;
    font-size: 12px;
    text-align: center;
  }
  .date {
    padding: 10px;
  }
  .textColor {
    color: #999;
    font-weight: 500;
    font-size: 15px;
  }
  .showColor {
    color: #000;
    font-weight: 500;
    font-size: 15px;
  }
  .hot-suggest {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0px;
  }
  .item {
    padding: 4px 15px;
    border-radius: 14px;
    margin: 4px;
    font-size: 12px;
  }
  .vanbtn {
    font-weight: 500;
    font-size: 18px;
    background-image: var(--tjc-theme-linear-gradient, linear-gradient(90deg, #fa8c1d, #fcaf3f));
    height: 38px;
  }
  .viewHouseBtns {
    margin-top: 20px;
  }

  .newPriceColorIcon {
    margin-right: 100px;
  }

  .rmb {
    margin-right: -6px;
  }
</style>
